<template>
<div>
	<my-header></my-header>
	<my-bread>
		<span slot="bread">Goods</span>
	</my-bread>
	<div class="accessory-result-page accessory-page">
		<div class="container">
			<div class="filter-nav">
				<span class="sortby">排序:</span>
				<a href="javascript:void(0)" class="default cur">默认</a>
				<a href="javascript:void(0)" @click="sortGoods" class="price">价格
					<span class="soet-down" :class="{'sort-up':!sortFlag}">↓</span>
					 <!-- <svg class="icon icon-arrow-short" :class="{}"><use xlink:href="#icon-arrow-short"></use></svg> -->
				 </a>
				<a @click="showFilterPop" href="javascript:void(0)" class="filterby stopPop">Filter by</a>
			</div>
			<div class="accessory-result">
				<!-- filter -->
				<div class="filter stopPop" id="filter" :class="{' filterby-show':filterBy}">
					<dl class="filter-price">
						<dt>价格:</dt>
						<dd><a @click="handelClickS('all')" href="javascript:void(0)" :class="{'cur':acticve=='all'}">全部</a></dd>
						<dd v-for="(price,index) of priceFilter">
							<a @click="handelClickS(index)" :class="{'cur':index===acticve}" href="javascript:void(0)">{{price.startPrice}} - {{price.endPrice}}</a>
						</dd>

					</dl>
				</div>
				<!-- search result accessories list -->
				<div class="accessory-list-wrap">
					<div class="accessory-list col-4">
						<ul>
							<li v-for="(item,index) of goodList" :key="item.productId">
								<div class="pic">
									<a href="#"><img v-lazy="'static/'+item.productImg" alt=""></a>
								</div>
								<div class="main">
									<div class="name">{{item.productName}}</div>
									<div class="price">{{item.salePrice}}</div>
									<div class="btn-area">
										<a href="javascript:;" @click="addCart(item.productId)" class="btn btn--m">加入购物车</a>
									</div>
								</div>
							</li>

						</ul>
						<div style="text-align:center;" class="load-more" v-show="aaa" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="30">
							<img src="../../../static/loading-svg/loading-spinning-bubbles.svg" alt="">

						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="md-overlay" v-show="overLaw" @click="handelOverlayClick">
	</div>
	<my-modal :mdShow="mdShow" @close="closeModal">
		<p slot="msg">
			加入购物车失败，请先登录
		</p>
		<div class="" slot="btnGroup">
			<a @click="mdShow=false" class="btn btn--m" href="#">关闭</a>
		</div>
	</my-modal>
	<my-modal :mdShow="mdShowCart" @close="closeModal">
		<p slot="msg">
			<svg class="icon-status-ok">
			  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-status-ok"></use>
			</svg>
			<span>加入购物车成功</span>
		</p>
		<div class="" slot="btnGroup">
			<a @click="mdShowCart=false" class="btn btn--m" href="#">继续购物</a>
			<router-link class="btn btn--m" :to="{ name: 'Cart', params: {} }">查看购物车</router-link>
		</div>
	</my-modal>
	<my-footer></my-footer>
</div>
</template>
<script>
import MyHeader from "@/components/Header"
import MyFooter from "@/components/Footer"
import MyBread from "@/components/Bread"
import MyModal from "@/components/Modal"

export default {
	data() {
		return {
			goodList: [],
			mdShow: false,
			mdShowCart: false,
			modalMsg: '',
			acticve: 'all',
			filterBy: false,
			overLaw: false,
			sortFlag: true,
			aaa: false,
			busy: false,
			page: 1,
			pageSize: 4,
			priceFilter: [{
				startPrice: '0',
				endPrice: '100.00'
			}, {
				startPrice: '100.00',
				endPrice: '500.00'
			}, {
				startPrice: '500.00',
				endPrice: '1000.00'
			}, {
				startPrice: '1000.00',
				endPrice: '5000.00'
			}]
		}
	},
	mounted() {
		this.getListInfo()
	},
	methods: {
		closeModal() {
			this.mdShow = false
			this.mdShowCart = false
		},
		addCart(productId) {
			this.$http.post("/api/goodList/addCart", {
				productId
			}).then((res) => {
				let data = res.data
				if (data.status == "0") {
					this.modalMsg = '加入购物车成功';
					this.mdShowCart = true
					this.$store.commit('updateCartCount', 1)

				} else {
					this.mdShow = true
					this.modalMsg = '加入购物车失败，请先登录';
				}
			})
		},
		loadMore() {
			this.busy = true
			setTimeout(() => {
				this.page++;
				this.getListInfo(true)

			}, 500);

		},
		getListInfo(flag) {
			var param = {
				page: this.page,
				pageSize: this.pageSize,
				sort: this.sortFlag ? 1 : -1,
				priceLev: this.acticve
			}
			this.aaa = true
			this.$http.get('/api/goodList', {
				params: param
			}).then((res) => {

				const data = res.data
				this.aaa = false
				if (flag) {
					this.goodList = this.goodList.concat(data.result.list)
					if (data.result.count < 4) {
						this.busy = true
					} else {
						this.busy = false
					}
				} else {
					this.goodList = data.result.list
					this.busy = false

				}


			})
		},
		sortGoods() {
			this.sortFlag = !this.sortFlag
			this.page = 1
			this.getListInfo()
		},
		handelClickS(i) {
			this.acticve = i
			this.page = 1
			this.getListInfo()
			this.closePop()
		},
		showFilterPop() {
			this.filterBy = !this.filterBy
			this.overLaw = !this.overLaw

		},
		handelOverlayClick() {
			this.closePop()
		},
		closePop() {
			this.filterBy = false
			this.overLaw = false
		}

	},
	components: {
		MyHeader,
		MyFooter,
		MyBread,
		MyModal
	}
}
</script>


<style media="screen">
.soet-down {
	transition: all .3s ease-out;
	display: inline-block;
	width: 10px;
}

.sort-up {
	transform: rotate(180deg);
	transition: all .3s ease-out;
}
</style>
